import Taro from "@tarojs/taro";
import PageNav from "@/components/pageNav";
import {Text, View} from "@tarojs/components";
import Avatar from "@/components/avatar";
import userInfo from "@/store/user";
import React, {useRef} from "react";
import NotificationBar from "./notification-bar";
import DataBoard from "@/pages/home/dataBoard";
import {orderType} from "@/types";
import http from "@/request";
import OrderList from "@/components/orderList";
import "./index.scss"

const Home: React.FC = ()=> {
    const capsuleObj = global.wx.getMenuButtonBoundingClientRect();
    const noticeBarRef= useRef({getList: () => {}})
    const dataBoardRef = useRef({init: () => {}})

    const [orderList, setOrderList] = React.useState<orderType[]>([]);
    const [total, setTotal] = React.useState<number>(0);

    const getPendingOrder = () => {
        http.post('/disp/biz/order/pagePendingOrder', {
            pageSize: 99999,
            pageNum: 1,
            bizTeamUserCode: userInfo.info?.userCode
        }).then(res => {
            setOrderList(res.data.list || [])
            setTotal(res.data.total || 0)
        })
    }
    Taro.useDidShow(() => {
        getPendingOrder()
        noticeBarRef.current.getList()
        setTimeout(() => {
            dataBoardRef.current.init()
        }, 500)
    })

    return (<View className="page">
        <View className="top-container">
            <PageNav className={'page-nav'}>
                <View className="flex-row flex-item flex1" style={{height: capsuleObj.height + 'px'}}>
                    <View className="flex-row flex-item">
                        <Avatar className="avatar-comp" size={capsuleObj.height * 1.3 + 'px'} url={userInfo.info?.headImage}></Avatar>
                        <Text className="display-account-name">{userInfo.info?.username}</Text>
                    </View>
                </View>
            </PageNav>
        </View>
        <View className="page-body">
            <NotificationBar ref={noticeBarRef}/>
            <DataBoard ref={dataBoardRef}/>
            <View className="order-list-title">待处理订单 ({total})</View>
            <OrderList btns={['reschedule', 'success', 'fail', 'copy']} orderList={orderList}></OrderList>
        </View>
    </View>)
}

export default Home